<template>
  <div class="login-container">
    <img class="bg"
         src="@/assets/img/bg.jpg">
    <div class="login-form">
      <h1 class="title">后台</h1>
      <el-form ref="loginForm"
               :model="loginForm"
               :rules="loginRules"
               auto-complete="on"
               label-position="left">
        <el-form-item prop="username">
          <el-input ref="username"
                    v-model.trim="loginForm.username"
                    placeholder="帐号"
                    name="username"
                    type="text"
                    tabindex="1"
                    auto-complete="on" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input :key="passwordType"
                    ref="password"
                    v-model.trim="loginForm.password"
                    :type="passwordType"
                    placeholder="密码"
                    name="password"
                    tabindex="2"
                    auto-complete="on"
                    @keyup.enter.native="handleLogin" />
        </el-form-item>
        <div class="bottom"><el-button type="text"
                     @click="showPassword = true">忘记密码</el-button></div>
        <el-button :loading="loading"
                   type="primary"
                   style="width:100%;margin-bottom:30px;"
                   @click.native.prevent="handleLogin">登录</el-button>
      </el-form>
    </div>
    <ym-password :visible.sync="showPassword"> </ym-password>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
import dayjs from 'dayjs'
export default {
  name: 'Login',
  data () {
    return {
      showPassword: false,
      loginForm: {
        username: '',
        password: '',
      },
      loginRules: {
        username: [{ required: true, message: '请填写', trigger: 'blur' }],
        password: [{ required: true, message: '请填写', trigger: 'blur' }],
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      storeOpts: []
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    },

  },

  methods: {
    handleLogin () {
      location.replace('/home');
      return false
      // let form = cloneDeep(this.loginForm)
      // this.loading = true
      // this.$command.execute({
      //   api: `/login`,
      //   params: form,
      // }).then((res) => {
      //   this.loading = false
      //   this.$store.dispatch('currentMbr/setMemberInfo', res.data)
      //   if (res.data && res.data.vdata && res.data.vdata.authirizes && res.data.vdata.authirizes.filter(e => e.authirize).length > 0) {
      //     var gotoUrl = sessionStorage.getItem("goto-url");
      //     if (!gotoUrl) {
      //       gotoUrl = location.origin + gApp.config.BASE_URL;
      //     }
      //     sessionStorage.removeItem("goto-url");
      //     location.replace(gotoUrl);
      //   } else {
      //     this.$message({
      //       type: 'info',
      //       message: `该账号暂无访问权限，请联系管理员`
      //     });
      //   }
      // }).catch((ex) => {
      //   this.loading = false;
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
$bg: #fff;
$dark_gray: #889aa4;
$light_gray: #eee;
.title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 4px;
}
.el-form-item {
  margin-left: 0px;
}
.login-container {
  height: 100vh;
  padding-top: 160px;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 0 10px #999;
  .bg {
    width: 100%;
    position: absolute;
    top: 0;
    height: 100vh;
  }
  .login-form {
    position: absolute;
    right: 200px;
    width: 320px;
    padding: 50px;
    margin: 0 auto;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
  }
  .saoma {
    position: relative;
    width: 400px;
    max-width: 100%;
    padding: 50px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    .code {
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
      p {
        font-size: 14px;
        color: #5565f9;
        padding: 10px 10px 0 0;
      }
    }
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
  .miniCode {
    width: 150px;
    height: 150px;
    position: relative;
    text-align: center;
    margin: 0 auto;
    .codePath {
      width: 150px;
      height: 150px;
      display: block;
    }
    .loadingBox {
      position: absolute;
      top: 0;
      left: 0;
      width: 150px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 30px;
      }
      p {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
    }
    .modal {
      background: rgba(255, 255, 255, 0.9);
    }
  }
}
.bottom {
  display: flex;
  justify-content: flex-end;
}
</style>
